<!--
 * @Author: your name
 * @Date: 2020-11-10 15:55:00
 * @LastEditTime: 2020-11-12 20:34:03
 * @LastEditors: 任静
 * @Description: In User Settings Edit
 * @FilePath: \tree\src\views\home\my\index.vue
-->
<template>
    <div class="my">
        <div class="myHeader">
            <h4>我的26pppp</h4>
            <h3>111</h3>
             <h2>222</h2>
               <h5>哈哈哈</h5>
              <h2>66</h2>
        </div>
        <div class="myMain">
                <dl class="myData" @click="clickToMydata">
                    <dt><img src="@/assets/1..gif" alt=""></dt>
                    <dd>
                        <div>建军</div>
                        <div>16601538485</div>
                    </dd>
                    <dd><i class="iconfont icon-xiayiye"></i></dd>
                </dl>
                <div class="dataClassify">
                    <div class="mainName">我的服务</div>
                    <div class="classify">
                        <dl v-for="(item,index) in classifys" :key="index">
                            <dt><i :class=item.icon></i></dt>
                            <dd>{{item.text}}</dd>
                        </dl>
                    </div>
                </div>
        </div>
    </div>
</template>
<script>
import {defineComponent,reactive} from 'vue'
import {useRouter} from "vue-router"
export default defineComponent({
    setup(){
        let router = useRouter()
        let classifys = reactive([
            {
                icon:"iconfont icon-duibifenxi",
                text:"我的对比"
            },
            {
                icon:"iconfont icon-lianxiwomen",
                text:"联系我们"
            },
            {
                icon:"iconfont icon-drxx66",
                text:"意见反馈"
            },
            {
                icon:"iconfont icon-fenxiang",
                text:"分享好友"
            }
        ]);

        let clickToMydata = ()=>{
            router.push("/mydata")
        }

        return {
            classifys,
            clickToMydata  
        }
    }
});
</script>
<style lang="scss" scoped>
    @import url("../../../fonts/iconfont.css");
    .my{
        width: 100%;
        height: 100%;
        overflow: hidden;
        // font-size: 14px;
        display: flex;
        flex-direction: column;
        font-size:14px;
    }
    .myHeader{
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size:16px;
        border-bottom: 1px solid #ccc;
    }
    .myMain{
        flex:1;
        overflow: hidden;

        .myData{
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-bottom:1px solid #ccc;  
            dt{
                img{
                    width: 70px;
                    height: 70px;
                    border-radius: 50%;
                }
                margin:0 10px;
            }
            dd:nth-of-type(1){
                flex:1;
                margin:0;
                div{
                    line-height: 25px;
                }
            }
            dd{
                margin:0 10px;
            }
        }

        .dataClassify{
            border-radius: 15px;
            border:1px solid #ccc;
            margin:10px;

            .mainName{
                font-weight: bold;
                width: 100%;
                text-align: center;
                line-height: 40px;
                // font-size:15px;
                border-bottom: 1px solid #ccc;
            }

            .classify{
                display: flex;
                justify-content: space-around;
                text-align: center;
                dl{
                    margin:20px 0;
                    dt{
                        i{
                            font-size: 35px;
                            color:#0E91FB;
                        }
                    }
                }
            }
        }

    }

</style>
